<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的客户</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="container" id="father">
        <div class="header">
            <div class="h-left">
                <span class="iconfont icon-suoyoukehu"></span> 我的客户
            </div>
            <div class="h-right">
                <button type="button" class="btn btn-info"><span class="iconfont icon-daoru"></span> 导入</button>
                <button type="button" class="btn btn-info"><span class="iconfont icon-export"></span> 导出</button>
                <a href="./connection.html" class="btn btn-info"><span class="iconfont icon-shuaxin"></span> 刷新</a>
            </div>
        </div>
        <div class="check">
            <div class="check-middle">
                <span class="iconfont icon-sousuoxiao"></span> 筛选查询
            </div>
            <form class="check-botton">
                客户名称：<input type="text" id="ipt_name">
                客户类别：<select id="sle_type" style="text-align: center;">
                    <option value="0">&Lt;------请选择-------&Gt;</option>
                    <option>国有企业</option>
                    <option>私营企业</option>
                    <option>事业单位或社会团体</option>
                    <option>中外合资</option>
                    <option>外商独资</option>
                    <option>其他</option>
                </select>
                客户标签：<select id="sel_customer_label" style="text-align: center;">
                    <option value="0">&Lt;------请选择-------&Gt;</option>
                    <option>优质客户</option>
                    <option>普通客户</option>
                    <option>目标客户</option>
                    <option>无效客户</option>
                    <option>待开发客户</option>
                    <option>需关注客户</option>
                </select>
                <input type="button" class="btn btn-info" value="查询" id="btn_Query">
                <input type="button" class="btn btn-info" value="重置" id="btn_Reset">
            </form>
        </div>
        <div class="tableF">
            <table class="table table-bordered">
                <div class="header">
                    <div class="h-left2">
                        <span class="iconfont icon-liebiao"></span> 数据列表
                    </div>
                    <div class="h-right2">
                        <a type="button" class="btn btn-info" id="add" href="./addConnection.html">新增</a>
                    </div>
                </div>
                <thead class="t-head">
                    <tr>
                        <th>序号</th>
                        <th>客户名称</th>
                        <th>客户标签</th>
                        <th>客户类型</th>
                        <th>所在城市</th>
                        <th>主要联系人</th>
                        <th>部门</th>
                        <th>职务</th>
                        <th>手机号码</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="tbody-tr">

                </tbody>
            </table>
        </div>
        <!-- 分页条 -->
        <nav aria-label="Page navigation">
            <ul class="pagination" id="pageF">

            </ul>
        </nav>
    </div>

    <!-- 确认模态框 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="delModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">客户删除！</h4>
                </div>
                <div class="modal-body">
                    <p>是否删除该客户所有数据？</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="del">确定</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!-- <script src="../data/database.js"></script> -->
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../data/database.js"></script>
    <script>
        let prestoreId; //预存客户id
        let nowPage; //当前页码
        $(document).ready(tableInit);
        function tableInit() {//初始化页面渲染
            nowPage = 1;
            pageRendering(connection, 4, 1);//当前展示第一页

            $('#tbody-tr').on('click', 'td[class="operate"]', function (e) {//预存客户id
                prestoreId = $(e.target).parent().attr('data-id');
                localStorage.setItem('prestoreId', JSON.stringify(prestoreId));
            });

            $('#del').on('click', function () {//加载删除事件
                for (let i = 0; i < connection.length; i++) {
                    const e = connection[i];
                    if (e.id == prestoreId) {
                        connection.splice(i, 1);
                        i--;
                    }
                }

                prestoreId = 0;//预存客户id归零 
                asyncLocalStory("connection");
                pageRendering(connection, 4, nowPage);//重新渲染
            })

            checkConnection();//加载查询事件
        }

        //页面数据渲染；arr为渲染 数据来源（数组）a为每一页渲染几条数据，b为渲染第几页
        function pageRendering(arr, a, b) {
            a = parseInt(a);
            b = parseInt(b);
            let pageN = getPage(arr, a)//输入每页渲染几条数据,获得有几页 

            if (pageN < b) {
                b = pageN;
            }

            document.getElementById('tbody-tr').innerHTML = '';//清空列表
            if (arr.length == 0) {
                return
            }
            let fragment1 = document.createDocumentFragment();//建立文档碎片

            for (let i = (b - 1) * a; i < b * a; i++) {
                if (i > arr.length - 1) {
                    continue;
                }
                const element = arr[i];
                //添加客户相关信息
                let str = `<td>${element.name}</td>
                    <td>${element.customer_label}</td>
                    <td>${element.type}</td>
                    <td>${element.city}</td>
                    `;
                if (element.counterpart == 0 || element.counterpart == false) {
                    str += `
                        <td>无</td>
                        <td>无</td>
                        <td>无</td>
                        <td>无</td>
                        `;
                } else {
                    staff.forEach((e, i, arr) => {
                        if (e.id == element.counterpart) {//添加主要联系人信息
                            str += `
                        <td>${e.name}</td>
                        <td>${e.department}</td>
                        <td>${e.post}</td>
                        <td>${e.phone}</td>
                        `;
                        }
                    });
                }
                let tr = document.createElement('tr');
                tr.innerHTML = `<td>${i + 1}</td>
                    ${str}
                    <td data-id="${element.id}" class="operate">
                        <a class="btn edit" href="./editConnection.html">编辑</a>
                        <a class="btn look " href="../connectionAbout/html/CustomerDetails.html">查看</a>
                        <button type="button" class="btn btn-primary preDeletion" data-toggle="modal" data-target="#delModal" ">删除</button>
                    </td>` ;

                fragment1.appendChild(tr);
            }//进行数据渲染
            document.getElementById('tbody-tr').appendChild(fragment1);
            fragment1 = '';

            pagingButtonBinding(pageN)//分页按钮绑定事件
        }

        function pagingButtonBinding(num) {//分页按钮绑定事件，num为最大页数
            $('#pageF').on('click', 'li[data-page]', function (e) {
                if (nowPage == parseInt(e.target.innerHTML)) {
                    return;
                }
                nowPage = parseInt(e.target.innerHTML);
                pageRendering(connection, 4, nowPage);
            });
            $('#pageMinus').on('click', function (e) {
                nowPage -= 1;
                if (nowPage < 1) {
                    nowPage = 1;
                    return;
                }
                pageRendering(connection, 4, nowPage)
            });
            $('#pageAdd').on('click', function (e) {
                nowPage += 1;
                if (nowPage > num) {
                    nowPage = num;
                    return;
                }
                pageRendering(connection, 4, nowPage)
            });
        }

        function getPage(arr, num) {//获取并渲染分页；arr数据源，num一页几条数据，返回页数
            let pageNum;
            let str = '';
            pageNum = parseInt(arr.length / num);//获取页数
            if (arr.length % num != 0) {
                pageNum += 1;
            }
            for (let i = 0; i < pageNum; i++) {
                str += `<li data-page="${i + 1}"><span>${i + 1}</span></li>`
            }

            $('#pageF')[0].innerHTML = ` <li id="pageMinus">
                    <span aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </span>
                </li>
               ${str}
                <li id="pageAdd">
                    <span aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </span>
                </li>`;

            return pageNum;
        }

        function checkConnection() {//查询函数
            $('#btn_Reset').on('click', function () {//重置
                $('#sle_type').val(0);
                $('#sel_customer_label').val(0);
                $('#ipt_name').val('');
                pageRendering(connection, 4, 1);
            });
            $('#btn_Query').on('click', function () {//查询
                let connection_name = $.trim($('#ipt_name').val());
                let connection_type = $.trim($('#sle_type').val());
                let connection_label = $.trim($('#sel_customer_label').val());
                let arr1 = [];
                let arr2 = [];
                let arr3 = [];
                if (connection_name != '') {
                    connection.forEach(e => {
                        if (e.name == connection_name) {
                            arr1.push(e)
                        }
                    })
                } else { arr1 = connection };
                // console.log(arr1);
                if (connection_type == 0) { arr2 = arr1 }
                else {
                    console.log(1);
                    arr1.forEach(e => {
                        if (e.type == connection_type) {
                            arr2.push(e)
                        }
                    })
                };
                // console.log(arr2);
                if (connection_label == 0) { arr3 = arr2 }
                else {
                    arr2.forEach(e => {
                        if (e.customer_label == connection_label) {
                            arr3.push(e)
                        }
                    })
                };
                // console.log(arr3);
                pageRendering(arr3, 4, 1);
            })
        }
    </script>
</body>

</html>